<script lang="ts">
import { defineComponent } from "vue";
import { Codemirror } from "vue-codemirror";
import { javascript } from '@codemirror/lang-javascript'
import { html } from '@codemirror/lang-html'
import { json } from '@codemirror/lang-json'
import { oneDark } from '@codemirror/theme-one-dark'
export default defineComponent({
  setup(props:any) {
      const code = props.code;
      
      const extensions:any[] = [
          javascript(),html(),json(), oneDark
          ]

      return {
        code,
        extensions,
        // log: console.log
        log:(string:any,event:any)=>{}
      }
  },
  props:{
      code:String,
  }
  
});
</script>

<template> 
    <div :style="{margin:'10px 0'}">
      <vue-codemirror
        v-model="code"
        placeholder="Code goes here..."
        :autofocus="true"
        :indent-with-tab="true"
        :tab-size="2"
        :extensions="extensions"
        :disabled="true"
        @ready="log('ready', $event)"
        @change="log('change', $event)"
        @focus="log('focus', $event)"
        @blur="log('blur', $event)"
      >
      </vue-codemirror>
    </div>
</template>

<style lang="scss" scoped></style>
